<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JAVAscript练习</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" href="http://pengjianquan.pro.bluej.cn/resume/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../../index.css"/>
		<style>
			#scrollTop {
				width: 80px;
				height: 300px;
				background: yellow;
				position: absolute;
				right: 0;
				bottom: 0px;
				display: none;
				transition: none;
			}
			
			#scrollTop button {
				border-radius: 0;
				position: absolute;
				right: 0;
				bottom: 0;
			}
			
			body {
				height: 2000px;
			}
		</style>
	</head>

	<BODY>
		<pre><h1>JAVAscript练习</a></h1></pre>
		<div id="div1" class="box box-re form-inline">
			1、可视区尺寸<br><br>
			<code>document.documentElement.clientWidth & document.documentElement.clientHeight</code><br><br>
			<button class="btn btn-info">开启页面点击</button><br><br>
		</div>

		<div id="div2" class="box box-re form-inline">
			2、滚动距离<br><br>
			<code>document.body.scrollTop & document.documentElement.scrollTop</code><br><br>
			<button class="btn btn-info">查看滚动距离</button><br><br>
		</div>

		<div id="div3" class="box box-re form-inline">
			3、浮动层<br><br>
			<code>window.onscroll & window.onresize & document.documentElement.scrollTop</code><br><br>
			<button class="btn btn-info">展现浮动层</button><br><br>
		</div>

		<div id="Record" class="box box-re red">
			记录<br>
			<p>可视区尺寸：窗口大小影响可视区尺寸，计算后的尺寸不包括滚动条。</p>
			<p>window.onscroll：当窗口滚动时发生。</p>
			<p>window.onresize：当窗口改变大小时发生。</p>
		</div>
		<div id="scrollTop">浮动层</div>

	</BODY>

</HTML>